<template>
	<view class="top_main">
		<view class="title">新用户注册</view>
		<view class="input"><input type="text" v-model="user.phone" placeholder="请输入手机号" /></view>
		<view class="input"><input type="password" v-model="user.password" placeholder="请输入密码" /></view>
		<view class="input" style="display: flex;justify-content: space-between;">
			<input type="text" v-model="user.code" placeholder="验证码" />
			<view class="codeButton" size="mini" @click="getCode">获取验证码</view>
		</view>
		<button class="regbutton" @click="reg">注册</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import api from '../../script/api.js'
	import tools from '../../script/tools.js'

	const user = ref({})

	// 注册按钮
	const reg = () => {
		api.post('/user/phone', user.value, (resp) => {})
	}

	// 获取验证码
	const getCode = () => {
		api.post('/tools/sendPhoneCode', user.value, (resp) => {
			if (resp.success) {
				uni.showToast({
					title: '获取验证码成功',
				})
			} else if (resp.code == 500) {
				uni.showToast({
					title: resp.message,
					icon: 'error'
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	.top_main {
		padding: 62rpx;
	}

	.title {
		font-size: 48rpx;
		font-weight: 700;
		color: #1b2f29;
		margin-bottom: 200rpx;
	}

	.input {
		border-bottom: 0.5px solid #dcdcdc;
		margin-top: 30rpx;
		padding: 10px;

		&:hover {
			border-bottom: 0.5px solid #1890ff;
		}
	}

	.codeButton {
		font-size: 20rpx;
		color: #fff;
		background: #1890ff;
		border-radius: 3px;
		padding: 5px;
	}

	.regbutton {
		margin: 50rpx 0px;
		color: #fff;
		background-color: #1890ff;
	}
</style>